<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8-1</title>
    <style>
        .bigdiv {
            height: 700px;
            background-color: rgb(241, 222, 222);
        }
        
        .topdiv {
            height: 480px;
            background-color: pink;
            background-image: url(image/8-1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }
        
        .bottomdiv {
            height: 100px;
            width: 750px;
            background-color: rgb(253, 203, 203);
            margin: 0 auto;
        }
        
        .smalldiv {
            height: 80px;
            width: 80px;
            background-color: rgb(229, 247, 208);
            margin: 10px 5px;
            float: left;
            box-sizing: border-box;
            padding: 30px 22px;
        }
        
        p {
            float: left;
            margin: 20px 0;
            color: red;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="bigdiv">
        <div class="topdiv"></div>
        <div class="bottomdiv">
            <p>距离本场秒杀结束还有：</p>
            <div class="smalldiv">00天</div>
            <div class="smalldiv">00时</div>
            <div class="smalldiv">00分</div>
            <div class="smalldiv" id="miao">00秒</div>
        </div>
    </div>
    <script>
        var second = document.querySelector('#miao');
        var flat = 60;
        var time = window.setInterval(function() {
            second.innerHTML = flat + '秒';
            if (flat > 0) {
                flat--;
            }

        }, 1000);
    </script>
</body>

</html>